<template>
  <div class="mt-1">
    <van-form @submit="handleSubmit">
      <h4 style="margin: 0 0 0.4rem 1rem; color: gray">
        当前产区:{{ this.$store.getters.productionLine }}
      </h4>
      <van-field
        v-model="code"
        clearable
        label="拍码"
        placeholder="请输入拍码"
        ref="pmfocus"
        @focus="stopKeyborad"
      />
      <ag-grid-vue
        style="width: 100%; height: 65vh"
        class="ag-theme-alpine mt-1"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :gridOptions="gridOptions"
        :singleClickEdit="true"
        rowSelection="multiple"
        :rowData="rowData"
      >
      </ag-grid-vue>
      <van-button block type="info" class="mt-1">提交</van-button>
      <audio src="../../assets/warning.mp3" preload="auto" id="bgMusic"></audio>
    </van-form>
  </div>
</template>

<script>
import { deliveryPlants } from "../../assets/keyValue";
import { AgGridVue } from "ag-grid-vue";
import { CODE_LENGTH } from "../../config";
import { parseQRCode, toast } from "../../utils/common";
import { pat } from "../../api/material";
import { allPush } from "../../api/feeding";

export default {
  name: "Return",
  components: { AgGridVue },
  data() {
    return {
      labelWidth: "7em",
      deliveryPlants: deliveryPlants,
      deliveryPlant: "",
      deliveryPlantAndWarehouse: [],
      fieldValue: "",
      deliveryPlantVisible: false,
      submitSure: true,
      code: "",
      fieldNames: {
        text: "name",
        value: "id",
      },
      gridOptions: {},
      gridApi: null,
      defaultColDef: {
        resizable: true,
      },
      columnDefs: [
        { headerName: "物料", field: "ProductId", width: 90 },
        { headerName: "物料名称", field: "ProductName", width: 110 },
        { headerName: "生产日期", field: "ProductionDate", width: 97 },
        { headerName: "数量", field: "StockQuantity", width: 70 },
      ],
      rowData: [],
      rowPallenNoNum: [],
    };
  },
  watch: {
    code(val) {
      if (val.length > CODE_LENGTH) {
        let res = parseQRCode(val);
        if (res) {
          let productionline = this.$store.getters.productionLine;
          this.findPat(productionline, res.palletNo);
        } else {
          this.playMusic();
          toast("无法识别");
        }
      }
      this.code = "";
      this.$refs.pmfocus.focus();
    },
  },
  methods: {
    // 消除获取焦点时自动弹出键盘
    stopKeyborad() {
      this.$refs.pmfocus.$refs.input.setAttribute("readonly", "readonly");
      setTimeout(() => {
        this.$refs.pmfocus.$refs.input.removeAttribute("readonly");
      }, 200);
    },
    //播放警示音
    playMusic() {
      setTimeout(() => {
        let audio = document.getElementById("bgMusic");
        audio.play();
      }, 200);
    },
    async findPat(productionline, palletNo) {
      if (!this.rowData.find((it) => it.UniqueId === palletNo)) {
        let res = await pat(
          productionline,
          palletNo,
          "",
          this.$store.getters.WarehouseId
        );
        console.log(res);
        if (res && res.Status == 200 && res.Data) {
          this.rowData.push(res.Data);
        } else {
          this.playMusic();
          toast(res.Msg);
        }
      } else {
        this.playMusic();
        toast("此拍已被录入");
      }
    },
    async handleSubmit() {
      if (this.rowData.length > 0) {
        let productionline = this.$store.getters.productionLine;
        this.getPalletNoNum();
        let Item = this.rowPallenNoNum;
        let user = this.$store.getters.user;
        let RES = await allPush(
          productionline,
          "0",
          user,
          "2",
          Item,
          this.$store.getters.WarehouseId
        );
        if (RES.Status == 200) {
          toast("提交已完成");
          this.submitSure = true;
          this.rowPallenNoNum.length = 0;
          this.rowData = [];
        } else {
          this.playMusic();
          toast(RES.Msg);
          this.submitSure = false;
        }
      } else {
        this.playMusic();
        toast("数据为空");
      }
      this.$refs.pmfocus.focus();
    },
    getPalletNoNum() {
      if (this.submitSure) {
        let _that = this;
        this.gridApi.forEachNode((node) => {
          _that.rowPallenNoNum.push({
            OutStorageBillDetailId: node.data.OutStorageBillDetailId,
            UniqueId: node.data.UniqueId,
            Num: node.data.StockQuantity,
          });
        });
      }
    },
  },
  mounted() {
    this.gridApi = this.gridOptions.api;
    this.$refs.pmfocus.focus();
  },
};
</script>
